<template>
  <div >
    <div class="list-area">
      <div class="setting-area glo-content-area">
        <div class="btns glo-btn-group">
          <Button
            type="primary"
            @click="showCreate"
            v-if="allPermissions.setting"
          >{{ $t("emailSetting.setting") }}</Button>
        </div>
        <div class="title">{{ $t("emailSetting.EmailTit") }}</div>
      </div>
      <div class="glo-search-area">
        <div class="date-filter widget-item">
          <div class="widget-label">{{$t('emailSetting.BodyTemAnimalTimeS')}}：</div>
          <!-- <span style="margin-right:10px" class="widget-label">{{ $t("emailSetting.BodyTemAnimalTimeS") }} :  </span> -->
          <DatePicker
            class="date-widget"
            v-model="selectDate"
            type="daterange"
            :placeholder="$t('emailSetting.BodyTemAnimalTimeScope')"
          />
        </div>
        <div class="widget-item glo-clear-after">
          <i-button style="margin-top:36px" type="primary" @click="getData()">{{$t('emailSetting.Search')}}</i-button>
        </div>
      </div>
      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>

    <!-- <UserEdit
      v-if="ifCreate"
      @close="closeCreate"
    /> -->
    
    <!-- <UserEdit
      v-if="ifUpdate"
      edit-type="update"
      :edit-item="formItem"
      @close="closeUpdate"
    /> -->
    <UserEdit
      v-if="ifUpdate"
      edit-type="update"
      @close="closeUpdate"
    />
  </div>
</template>

<script>
import {
  getList,
  create,
  // getMailConfig
} from '@/api/email.js'
// import {
//   appUpdate,
// } from '@/api/person.js'
// import pageMixin from '@/utils/mixins/pageMixin.js'
import moment from 'moment'
import UserEdit from './UserEdit'
import UserListSettings from './UserListSettings'

export default {
  // mixins: [
  //   pageMixin,
  // ],
  components: {
    UserEdit,
  },
  computed: {
    btnShow () {
      return this.$store.state.btnShow
    },
  },
   watch: {
    btnShow(){
      this.columns = [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('emailSetting.IncomingEmail'),
          key: 'addressee',
        },
         {
          title: this.$t('emailSetting.SendContent'),
          key: 'context',
        },
        {
          title: this.$t('emailSetting.SendTime'),
          key: 'sendTime',
        },
        {
          title: this.$t('emailSetting.ContentType'),
          // key: 'type',
          key: 'type',
          render: (h, { row }) => {
            let label = '-'
            let labelID = ''
            if (row.type == '1') {
              label = this.$t('emailSetting.AbnormalTemperature')
            } 
            return h('div', [h('span', {
              domProps: {
                title: labelID
              }
            } ,label)

            ])
          },
        },
        // {
        //   title: this.$t('versionIndex.verOperation'),
        //   key: 'settings',
        //   width: 200,
        //   render: (h, { row }) => {
        //     return h(UserListSettings, {
        //       props: { row },
        //       on: {
        //         itemClick: (name) => this.handleSettingsClick(name, row),
        //       },
        //     })
        //   },
        // },
      ]
      return this.$store.state.btnShow
    }
  },
  data () {
    const pwdValidate = (rule, value, callback) => {
      this.$refs.formItem.validateField('pwdCheck')
      callback()
    }
    const pwdCheckValidate = (rule, value, callback) => {
      if (this.formItem.password != '' && value == '') {
        callback(new Error(this.$t('loginIndex.loginpwdCheck1')))
      } else if (this.formItem.password != value) {
        callback(new Error(this.$t('loginIndex.loginpwdCheck2')))
      } else {
        callback()
      }
    }
    const pwdInValidate = (rule, value, callback) => {
      if (this.formItem.passwordIn == '') {
        callback(new Error(this.$t('loginIndex.loginpwdCheck3')));
      } else {
        callback()
      }
    }
    return {
      total: 0,
      selectDate: [],
      passName: '',
      passNameid: '',
      modal1: false,
      // formItem: {
      //   mailSender: '',
      //   mailPassword: '',
      //   mailHost: '',
      //   mailTo: '',
      //   mailContext: '',
      //   mailPeriod: '' 
      // },
      validateRules: {
        passwordIn: [
            {required: false, validator: pwdInValidate, trigger: 'blur'}
        ],
        password: [
            {required: false, validator: pwdValidate, trigger: 'blur'}
        ],
        pwdCheck: [
            {required: false, validator: pwdCheckValidate, trigger: 'blur'}
        ]
      },
      selection: [],
      page: 1,
      pageSize: 10,
      list: [],
      personName: '',
      columns: [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('emailSetting.IncomingEmail'),
          key: 'addressee',
        },
         {
          title: this.$t('emailSetting.SendContent'),
          key: 'context',
        },
        {
          title: this.$t('emailSetting.SendTime'),
          key: 'sendTime',
        },
        {
          title: this.$t('emailSetting.ContentType'),
          // key: 'type',
          key: 'type',
          render: (h, { row }) => {
            let label = '-'
            let labelID = ''
            if (row.type == '1') {
              label = this.$t('emailSetting.AbnormalTemperature')
            } 
            return h('div', [h('span', {
              domProps: {
                title: labelID
              }
            } ,label)

            ])
          },
        },
        // {
        //   title: this.$t('versionIndex.verOperation'),
        //   key: 'settings',
        //   width: 200,
        //   render: (h, { row }) => {
        //     return h(UserListSettings, {
        //       props: { row },
        //       on: {
        //         itemClick: (name) => this.handleSettingsClick(name, row),
        //       },
        //     })
        //   },
        // },
      ],

      ifCreate: false,
      ifUpdate: false,
      editItem: null,
      allPermissions:{
        setting:false,
      },
    }
  },

  mounted () {
    this.getData()
    // this.getEmailSetting()
    this.getAllPermissions()
  },

  methods: {
    getAllPermissions(){
      let da=JSON.parse(window.localStorage.getItem('logo'))||[]
      da.map(v => {
        if(v.permission=='#emailAdmin'&&v.children){
          v.children.map(a=>{
            if(a.permission=='#setting'&&a.checked==='true'){
              this.allPermissions.setting=true
            }
            
          })
        }
      });
    },
    async getData () {
      var startDate = ""
      var endDate = ""
      if (this.selectDate.length) {
        [startDate, endDate] = this.selectDate
        if (moment.isDate(startDate)) {
          startDate = moment(startDate).format('YYYY-MM-DD')
        }
        if (moment.isDate(endDate)) {
          endDate = moment(endDate).format('YYYY-MM-DD')
        }
      }
      const { success, data } = await getList({
        page: this.page,
        limit: this.pageSize,
        startDate: startDate,
        endDate: endDate,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        list = data.data
        // list.map(v=>{
        //   if(v.type==1){
        //     v.type=this.$t('emailSetting.AbnormalTemperature')
        //   }
          
        // })
        page = data.pageNum || 1
        total = data.count
      }
      this.list = list
      this.page = page
      // this.pageSize = query.pageSize
      this.total = total
    },
    changeSize(e){
      this.pageSize=e;
      this.getData()
    },
    changePage(e){
      this.page=e
      this.getData()
    },
    showCreate () {
      this.ifUpdate = true
    },
    closeUpdate (ifUpdated) {
      // if(ifUpdated){
        this.ifUpdate = false
     
    },
    
  },
}
</script>

<style lang="less" scoped>
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
